<template>
  <div class="home" :style="{ height: pHeight }">
    <div class="contant">
      <div class="title">
        信息与人工智能委员会
      </div>
      <div class="sub-title">
        中国核医学状况调查
      </div>

      <div class="tab">
        <div
          class="tab-item"
          :class="{ active: active == '1' }"
          @click="changePost('1')"
        >
          个人登入
        </div>
        <div
          class="tab-item"
          :class="{ active: active == '2' }"
          @click="changePost('2')"
        >
          科主任登入
        </div>
        <div
          class="tab-item"
          :class="{ active: active == '3' }"
          @click="changePost('3')"
        >
          主委登入
        </div>
        <div
          class="tab-item"
          :class="{ active: active == '4' }"
          @click="changePost('4')"
        >
          科室登入
        </div>
      </div>
      <div class="form">
        <div
          class="form-item"
          @click="accoutClick('account')"
          :class="{ 'item-active': inputItem == 'account' }"
        >
          <mt-field
            label=""
            placeholder="请输入您的用户名"
            v-model="account"
            type="email"
          ></mt-field>
        </div>
        <div
          class="form-item"
          @click="accoutClick('password')"
          :class="{ 'item-active': inputItem == 'password' }"
        >
          <mt-field
            label=""
            type="password"
            placeholder="请输入您的密码"
            v-model="password"
          ></mt-field>
        </div>
      </div>
      <mt-button type="primary" class="login" @click="handleLogin"
        >登入</mt-button
      >
      <div class="register" @click="handleRegister">注册</div>
      <div class="error">{{ errmsg }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Home", // 登录
  components: {},
  data() {
    return {
      // account: "abc123",
      // password: "123456",
      account: "",
      password: "",
      inputItem: "",
      pHeight: "100%",
      active: "1",
      errmsg: "",
    };
  },
  mounted() {
    this.$nextTick(() => {
      let pageInfo = this.getWindowConfig();
      this.pHeight = pageInfo.windowHeight + "px";
    });
  },
  methods: {
    changePost(item) {
      this.active = item;
    },
    getWindowConfig() {
      let windowWidth = window.innerWidth;
      let windowHeight = window.innerHeight;
      if (typeof windowWidth !== "number") {
        if (document.compatMode === "CSS1Compat") {
          windowWidth = document.documentElement.clientWidth;
          windowHeight = document.documentElement.clientHeight;
        } else {
          windowWidth = document.body.clientWidth;
          windowHeight = window.body.clientHeight;
        }
      }
      return {
        windowWidth: windowWidth,
        windowHeight: windowHeight,
      };
    },
    accoutClick(val) {
      this.inputItem = val;
    },
    handleLogin() {
      if (!this.account) {
        this.errmsg = "用户名不能为空";
        return;
      }
      if (!this.password) {
        this.errmsg = "密码不能为空";
        return;
      }

      this.$axios
        .post("/web/login", {
          username: this.account,
          password: this.password,
          post: this.active,
        })
        .then((res) => {
          if (res.code == 200) {
            this.$store.commit("set_user_info", {
              username: this.account,
              post: this.active,
              userId: res.userId,
            });
            this.$router.push("./select");
          } else {
            this.errmsg = res.msg;
          }
        });
    },
    handleRegister(){
      this.$router.push("./register");
    }
  },
};
</script>
<style scoped lang="scss">
@import "~@/assets/style/base.scss";
.home {
  width: 100vw;
  height: 100vh;
  background: url("~@/assets/img/bg2.png") no-repeat;
  background-size: 100% 100%;
  padding-bottom:5%;
  box-sizing: border-box;
  overflow: hidden;
  display:flex;
  align-items: center;
  justify-content: center;
}
.contant{
  width: 80%;
  height: 75%;
  background: $f-bg-color;
  border-radius: 10px;
  padding: 20px 10px 0;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
  position: relative;
}
.title {
  font-size: 1.8rem;
  color: #407dfd;
  font-weight: bold;
}

.sub-title {
  color: #ee9647;
  margin-top: 1.4rem;
  font-size: 1.3rem;
}

.tab {
  display: flex;
  justify-content: space-between;
  margin-top: 15%;
  color: #a1abbd;
  font-size: 1.05rem;
  .tab-item {
    text-align: center;
    flex: 1;
    white-space: nowrap;
    display: flex;
    justify-content: space-around;
    &::after {
      content: "|";
      padding: 0 3px;
      color: #a1abbd;
      font-weight: 500;
    }
    &:last-child {
      &::after {
        content: "";
      }
    }
    &.active {
      color: #000;
      font-weight: 700;
    }
  }
}
.form {
  margin-top: 15%;
  .form-item {
    border-bottom: 1px solid #a1abbd;
    margin-top: 20px;
    &.item-active {
      border-bottom: 1px solid #407dfd;
      transition: 1s;
    }
  }
}

.login {
  width: 100%;
  margin-top: 15%;
}

.error {
  margin-top: 10%;
  color: #fa3534;
  text-align: center;
}
.register{
  color:#407dfd;
  text-align: center;
  margin-top:20px;
}
</style>
